<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="/static/layui-authtree-master/layui/css/layui.css" rel="stylesheet">
    <link href="/static/layui-authtree-master/layui/adminui/dist/css/admin.css" rel="stylesheet">
</head>
<body>
<div class="layui-form-item layui-form-text">
    <label class="layui-form-label">授权菜单：</label>
    <form class="layui-form">
        <div class="layui-form-item">
            <label class="layui-form-label">角色名称</label>
            <div class="layui-input-block">
                <input class="layui-input" type="text" name="name" placeholder="请输入角色名称" />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">选择权限</label>
            <div class="layui-input-block">
                <div id="LAY-auth-tree-index"></div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" type="submit" lay-submit lay-filter="LAY-auth-tree-submit">提交</button>
                <button class="layui-btn layui-btn-primary" type="reset">重置</button>
            </div>
        </div>
    </form>

</div>
</body>
<script src="/static/layui-authtree-master/layui/layui.js?t=1"></script>
<script>
    layui.config({
        base: '/static/layui-authtree-master/layui_exts/',//你存放authtree.js文件的位置
    });
</script>
<script>
    var a = {
        "code": 0,
        "msg": "获取成功",
        "data": {
            "trees":[
                {"name": "用户管理", "value": "yhgl", "checked": true, "disabled": false},
                {"name": "用户组管理", "value": "yhzgl", "checked": true, "disabled": false, "list": [
                        {"name": "角色管理", "value": "yhzgl-jsgl", "checked": true, "disabled": false, "list":[
                                {"name": "添加角色", "value": "yhzgl-jsgl-tjjs", "checked": true, "disabled": false},
                                {"name": "角色列表", "value": "yhzgl-jsgl-jslb", "checked": false, "disabled": false}
                            ]},
                        {"name": "管理员管理", "value": "glygl-tjgly", "checked": false, "disabled": false, "list":[
                                {"name": "添加管理员", "value": "glygl-tjgly-add", "checked": false, "disabled": false},
                                {"name": "管理员列表", "value": "glygl-glylb-list", "checked": false, "disabled": true},
                                {"name": "管理员管理", "value": "glygl-glylb-manage", "checked": false, "disabled": true}
                            ]}
                    ]},
                {"name": "API管理", "value": "api-manage", "checked": false, "disabled": false},
                {"name": "订单管理", "value": "order-manage", "checked": false, "disabled": false}
            ]
        }
    }

    layui.use(['jquery', 'authtree', 'form', 'layer'], function(){
        var $ = layui.jquery;
        var authtree = layui.authtree;
        var form = layui.form;
        var layer = layui.layer;
        // 初始化

                // 渲染时传入渲染目标ID，树形结构数据（具体结构看样例，checked表示默认选中），以及input表单的名字
                authtree.render('#LAY-auth-tree-index', [
                    {"name": "用户管理", "value": "yhgl", "checked": true, "disabled": false},
                    {"name": "用户组管理", "value": "yhzgl", "checked": true, "disabled": false, "list": [
                            {"name": "角色管理", "value": "yhzgl-jsgl", "checked": true, "disabled": false, "list":[
                                    {"name": "添加角色", "value": "yhzgl-jsgl-tjjs", "checked": true, "disabled": false},
                                    {"name": "角色列表", "value": "yhzgl-jsgl-jslb", "checked": false, "disabled": false}
                                ]},
                            {"name": "管理员管理", "value": "glygl-tjgly", "checked": false, "disabled": false, "list":[
                                    {"name": "添加管理员", "value": "glygl-tjgly-add", "checked": false, "disabled": false},
                                    {"name": "管理员列表", "value": "glygl-glylb-list", "checked": false, "disabled": true},
                                    {"name": "管理员管理", "value": "glygl-glylb-manage", "checked": false, "disabled": true}
                                ]}
                        ]},
                    {"name": "API管理", "value": "api-manage", "checked": false, "disabled": false},
                    {"name": "订单管理", "value": "order-manage", "checked": false, "disabled": false}
                ], {
                    inputname: 'authids[]',
                    layfilter: 'lay-check-auth',
                    // openall: true,
                    autowidth: true,
                });

                // PS:使用 form.on() 会引起了事件冒泡延迟的BUG，需要 setTimeout()，并且无法监听全选/全不选
                // form.on('checkbox(lay-check-auth)', function(data){
                //     // 注意这里：需要等待事件冒泡完成，不然获取叶子节点不准确。
                //     setTimeout(function(){
                //         console.log('监听 form 触发事件数据', data);
                //         // 获取选中的叶子节点
                //         var leaf = authtree.getLeaf('#LAY-auth-tree-index');
                //         console.log('leaf', leaf);
                //         // 获取最新选中
                //         var lastChecked = authtree.getLastChecked('#LAY-auth-tree-index');
                //         console.log('lastChecked', lastChecked);
                //         // 获取最新取消
                //         var lastNotChecked = authtree.getLastNotChecked('#LAY-auth-tree-index');
                //         console.log('lastNotChecked', lastNotChecked);
                //     }, 100);
                // });
                // 使用 authtree.on() 不会有冒泡延迟
                authtree.on('change(lay-check-auth)', function(data) {
                    console.log('监听 authtree 触发事件数据', data);
                    // 获取所有节点
                    var all = authtree.getAll('#LAY-auth-tree-index');
                    console.log('all', all);
                    // 获取所有已选中节点
                    var checked = authtree.getChecked('#LAY-auth-tree-index');
                    console.log('checked', checked);
                    // 获取所有未选中节点
                    var notchecked = authtree.getNotChecked('#LAY-auth-tree-index');
                    console.log('notchecked', notchecked);
                    // 获取选中的叶子节点
                    var leaf = authtree.getLeaf('#LAY-auth-tree-index');
                    console.log('leaf', leaf);
                    // 获取最新选中
                    var lastChecked = authtree.getLastChecked('#LAY-auth-tree-index');
                    console.log('lastChecked', lastChecked);
                    // 获取最新取消
                    var lastNotChecked = authtree.getLastNotChecked('#LAY-auth-tree-index');
                    console.log('lastNotChecked', lastNotChecked);
                });
                authtree.on('deptChange(lay-check-auth)', function(data) {
                    console.log('监听到显示层数改变',data);
                });

        form.on('submit(LAY-auth-tree-submit)', function(obj){
            var authids = authtree.getAll('#LAY-auth-tree-index');
            console.log('Choosed authids is', authids);
            obj.field.authids = authids;
            $.ajax({
                url: 'tree.json',
                dataType: 'json',
                data: obj.field,
                success: function(res){
                    layer.alert('提交成功！');
                }
            });
            return false;
        });
    });
</script>

</html>